<template>
	<div class = "wrap">
		<div class = "box" v-for = "(item, index) in data" :key = "index" @click="onClick(item.id)">
			<img :src = "item.coverImg" alt = "">
			<div class = "right">
				<div class = "title">{{ item.title }}</div>
				<div class = "num">销量: <span>{{ item.sales }}</span> </div>
				<div class = "footer">
					<div v-if="userId" class = "price">¥ <span>{{isVip?item.memberPrice:item.price}}</span> </div>
					<div v-else class = "price">¥ <span>{{isVip?item.memberPrice:item.price}}</span> </div>
					<div v-if="title != '拼团购'" class="num">月销: {{item.sales}}</div>
					<div v-if="title == '拼团购'" class="num">已拼成: {{item.number}}</div>
				</div>
			</div>
		</div>
  	</div>
</template>

<script>
import {
	Loading
} from 'element-ui';
export default {
	name: "order_item",
	props: {
		data: Array,
		isVip: '',
		title: ''
	},
	data() {
		return {
			userId: this.$cookie.get('userId'),
			CollectList:[],
			page: 1,
			selectList: {
				content: [],
			}
		}
	},
	method(){
		this.isCheak();
		this.getCollectList()
	},
	methods:{
	  onClick(id){
	    this.$router.push({
	      path: '/productDetails?id='+id + '&title='
	    })
	  },
	  getCollect(event, obj) {
			event.stopPropagation();
			var weizhiIndex = -1
			const yesNo = this.CollectList.some((item, index) => {
				if (item.id == obj.id) {
					weizhiIndex = index
					return true
				}
			})
			if (yesNo) {
				this.setCkeckXiangSi(obj, 1, this.CollectList[weizhiIndex].shoucangId)
			} else {
				this.setCkeckXiangSi(obj, 0, -1)
			}
		},
		getExist(itemId) {
			let aaaList = []
			const yesNo = this.CollectList.some((item, index) => {
				if (item.id == itemId) {
					aaaList.push(itemId)
					return true
				}
			})
			console.log()
			return !yesNo
			// return this.CollectList.some((item) => item.id == itemId);
		},
		//是否收藏
		isCheak() {
			this.$http({
				url: this.$http.adornUrl("/selfUserCollect/check"),
				method: "get",
				params: this.$http.adornParams({
					goodsId: this.$route.query.id,
					userId: this.userId
				})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.isCheck = data.data;
					this.shoucangId = data.msg;
				}
			});
		},
		//获取收藏数据列表
		getCollectList() {
			let loadingInstance = Loading.service({
				lock: true,
				text: '加载中……',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			
			this.$http({
				url: this.$http.adornUrl('/selfUserCollect/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page': this.page - 1,
					'size': 999,
					'userId': this.userId,
				})
			}).then(({
				data
			}) => {
				this.$nextTick(() => {
					loadingInstance.close();
				})
				if (data && data.status === 0) {
					let returnData = data.data
					let dataLsit = []
					this.CollectList=[]
					returnData.content.forEach(res => {
						if (res.goods) {
							dataLsit.push(res)
							// 执行后续操作
							this.CollectList.push({
								id: res.goodsId,
								shoucangId: res.id
							})
						}
					})
					this.selectList.content = dataLsit
				}
			})
		},
		// 相似的商品收藏
		setCkeckXiangSi(objItem, num, shoucangId) {
			if (this.userId) {
				if (!num) {
					this.$http({
						url: this.$http.adornUrl("/selfUserCollect/save"),
						method: "post",
						data: this.$http.adornData({
							goodsId: objItem.id,
							coverImg: objItem.coverImg,
							price: objItem.price,
							title: objItem.title,
							userId: this.userId
						})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.isCheak();
							this.getCollectList()
						}
					});
				} else {
					this.$http({
						url: this.$http.adornUrl("/selfUserCollect/delete"),
						method: "get",
						params: this.$http.adornParams({
							id: shoucangId
						})
					}).then(({ data }) => {
						if (data.status == 0) {
							this.isCheak();
							this.getCollectList()
							// console.log('删除收藏----data', data)
						}
					}).catch((err => {
						this.getCollectList()
					}));
				}
			}
		},

	}

}
</script>

<style scoped>
	.wrap {

	}

	.box {
		width: 100%;
		/*height: 320px;*/
		padding: 10px;
		display: flex;
		background: #fff;
		border: 1px solid #F0F0F0;
		margin-top: 10px;
		box-sizing: border-box;
	}

	img {
		width: 120px;
		height: 120px;
		border-radius: 5px;
	}

	.right {
		margin-left: 10px;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		padding: 10px 0;
		width: 100%;
	}

	.title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.num {
		font-size: 14px;
		color: #333333;
		font-weight: 500;
	}

	.num > span {
		color: #325BFF;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		line-height: 28px;
	}

	.price {
		color: #FF2D55;
	}

	.btn {
		width: 74px;
		height: 28px;
		background: #ff2d55;
		border-radius: 14px;
		font-size: 13px;
		color: #fff;
		text-align: center;
		line-height: 28px;
	}

</style>
